<template>
  <div class="pagination">
    <!-- 总数显示 -->
    <div class="pagination-total">共 {{ total }} 条</div>

    <!-- 上一页 -->
    <button
      class="pagination-btn"
      :disabled="currentPage === 1"
      @click="changePage(currentPage - 1)"
    >
      上一页
    </button>

    <!-- 页码 -->
    <ul class="pagination-pages">
      <li
        v-for="page in visiblePages"
        :key="page"
        :class="['pagination-page', { active: page === currentPage }]"
        @click="changePage(page)"
      >
        {{ page }}
      </li>
    </ul>

    <!-- 下一页 -->
    <button
      class="pagination-btn"
      :disabled="currentPage === totalPages"
      @click="changePage(currentPage + 1)"
    >
      下一页
    </button>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref } from 'vue';

export default defineComponent({
  name: 'Pagination',
  props: {
    total: {
      type: Number,
      required: true,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    currentPage: {
      type: Number,
      default: 1,
    },
  },
  emits: ['update:currentPage'],
  setup(props, { emit }) {
    const totalPages = computed(() => Math.ceil(props.total / props.pageSize));
    const currentPage = ref(props.currentPage);

    const visiblePages = computed(() => {
      const pages = [];
      const start = Math.max(1, currentPage.value - 2);
      const end = Math.min(totalPages.value, currentPage.value + 2);
      for (let i = start; i <= end; i++) {
        pages.push(i);
      }
      return pages;
    });

    const changePage = (page: number) => {
      if (page >= 1 && page <= totalPages.value) {
        currentPage.value = page;
        emit('update:currentPage', page);
      }
    };

    return {
      totalPages,
      currentPage,
      visiblePages,
      changePage,
    };
  },
});
</script>

<style scoped>
.pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: Arial, sans-serif;
}

.pagination-total {
  font-size: 14px;
  color: white;
}

.pagination-btn {
  padding: 5px 10px;
  border: 1px solid #ccc;
  background-color: transparent;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
  color:white
}

.pagination-btn:disabled {
  cursor: not-allowed;
  background-color: #e9e9e9;
  color:black
}
.pagination-pages {
  display: flex;
  list-style: none;
  gap: 5px;
  padding: 0;
  margin: 0;
}

.pagination-page {
  padding: 5px 10px;
  border: 1px solid #ccc;
  background-color:transparent;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
  color:white
}

.pagination-page.active {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

.pagination-page:hover {
  background-color: #e0e0e0;
}
</style>
